<template>
  <div class="Home">
    <div class="home_q">
      <ul>
        <li  v-for="item in list"
        :key="item.id">{{item}}</li>
      </ul>
    </div>
    <div class="wwww">
      <ul>
        <li   v-for="item in lists"
        :key="item.id" @click="dian(item.id)">{{item.title}}</li>
      </ul>
    </div>
    <div class="home_w" 
    v-for="item in this.$store.state.getgoods"
    :key="item.id"
    >
    <img :src="item.author.avatar_url" alt="">
    <span>{{item.tab}}</span>
    
    <p>{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[
        "首页","新手入门","API","关于","注册","登陆"
      ],
      lists:[
        {id:"ask",title:"全部"},
        {id:"share",title:"精华"},
        {id:"ask",title:"分享"},
        {id:"shart",title:"问答"},
        {id:"ask",title:"招聘"},
        {id:"share",title:"客户端测试"}
      ]
    }
  },
  methods:{
    dian(id){
      this.$store.commit("dian",id)
    }
  },
  mounted(){
    // this.$axios.get("list.json").then((res)=>{
    //   this.goods = res.data.data
    //   console.log(res);
    // })
    this.$store.dispatch("getgoods")
  }
}
</script>

<style lang="scss">
.home_q ul{
  width: 100%;
  height: 15vh;
  background-color: rgb(68, 68, 68);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  li{
    display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;
  color:antiquewhite;
  }
}
.home_w{
  width: 100%;
  overflow: scroll;
  display: inline-flex;
  justify-content: flex-start;
}
span{
  font-size: 5px;
  display: flex;
  align-items: center;
}
  p{
    font-size: 9px;
     white-space:nowrap
  }
img{
  width: 30px;
  margin-top: 6px;
}
.wwww{
  width: 100%;
  height: 8vh;
  background-color:honeydew;
  ul{
    width: 100%;
    height: 100%;
    display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  li:hover{
    display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: green;
  }
  }

}
</style>